<template>
  <div class="tab-list">
    <nav>
      <ul>
        <li @click="changeSelectTab(index)" :class="index===$attrs.value?'active-tab':''" v-for="(item, index) in tabList" :key="index">{{item.label}}</li>
      </ul>
    </nav>
  </div>
</template>

<script>
    export default {
      name: "tabs",
      props: {
        tabList: {
          type: Array,
          default: () => { return [] }
        }
      },
      methods: {
        changeSelectTab(index) {
          this.$emit('input', index)
        }
      }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .tab-list{
    border-bottom: 1px solid #F0F2F5;
    margin-bottom: 30px;
    ul{
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      align-items: center;
      li{
        cursor: pointer;
        text-align: center;
        margin-right: 5px;
        width: 120px;
        height: 36px;
        line-height: 36px;
        background-color: #f7f7f7;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
      .active-tab{
        background-color: #18a77a;
        color: #fff;
      }
    }
  }
</style>
